<template>
  <view class="cart-page">
    <!-- 购物车列表 -->
    <view class="cart-list">
      <view v-for="(item, index) in cartList" :key="item.id" class="cart-item">
        <view class="item-left">
          <view class="item-select" @click="toggleSelect(index)">
            <view class="radio" :class="{ checked: item.selected }"></view>
          </view>
        </view>

        <view class="item-content">
          <view class="item-image">
            <image :src="item.image" mode="aspectFill"></image>
          </view>

          <view class="item-info">
            <view class="item-title">{{ item.name }}</view>
            <view class="item-spec">{{ item.spec }}</view>
            <view class="item-price">¥{{ item.price }}</view>

            <view class="item-count">
              <view class="count-btn" @click="changeCount(index, -1)">-</view>
              <view class="count-num">{{ item.count }}</view>
              <view class="count-btn" @click="changeCount(index, 1)">+</view>
            </view>
          </view>
        </view>

        <view class="item-right">
          <view class="delete-btn" @click="deleteItem(item)">
            <image src="/static/icon/delShop.svg" class="delete-icon"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 空购物车提示 -->
    <view v-if="cartList.length === 0" class="empty-cart">
      <image src="/static/images/empty-cart.png" class="empty-image"></image>
      <view class="empty-text">购物车空空如也~</view>
      <view class="empty-btn" @click="goShopping">去逛逛</view>
    </view>

    <!-- 底部结算栏 -->
    <view v-if="cartList.length > 0" class="cart-footer">
      <view class="footer-left">
        <view class="select-all" @click="toggleAllSelect">
          <view class="radio" :class="{ checked: allSelected }"></view>
          <text>全选</text>
        </view>
        <view class="clear-cart" @click="clearCart">清空</view>
      </view>

      <view class="footer-right">
        <view class="total-price">
          合计: <text class="price">¥{{ totalPrice }}</text>
        </view>
        <view class="checkout-btn" @click="checkout"
          >结算({{ selectedCount }})</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import {
  getShoppingCardList_API,
  delShoppingCardList_API,
} from "../../api/shoppingCard";
export default {
  data() {
    return {
      cartList: [
        {
          cartId: 1,
          name: "时尚休闲运动鞋",
          spec: "颜色：白色/尺码：42",
          price: 299.0,
          count: 1,
          image: "/static/images/product1.jpg",
          selected: true,
        },
        {
          cartId: 2,
          name: "轻薄羽绒服外套",
          spec: "颜色：黑色/尺码：L",
          price: 499.0,
          count: 2,
          image: "/static/images/product2.jpg",
          selected: false,
        },
        {
          cartId: 3,
          name: "无线蓝牙耳机",
          spec: "颜色：白色/型号：Pro",
          price: 199.0,
          count: 1,
          image: "/static/images/product3.jpg",
          selected: true,
        },
      ],
    };
  },
  computed: {
    allSelected() {
      return (
        this.cartList.length > 0 && this.cartList.every((item) => item.selected)
      );
    },
    totalPrice() {
      return this.cartList
        .reduce((total, item) => {
          return item.selected ? total + item.price * item.count : total;
        }, 0)
        .toFixed(2);
    },
    selectedCount() {
      return this.cartList.filter((item) => item.selected).length;
    },
  },
  methods: {
    toggleSelect(index) {
      this.cartList[index].selected = !this.cartList[index].selected;
    },
    toggleAllSelect() {
      const selectStatus = !this.allSelected;
      this.cartList.forEach((item) => {
        item.selected = selectStatus;
      });
    },
    changeCount(index, num) {
      const newCount = this.cartList[index].count + num;
      if (newCount < 1) {
        uni.showToast({
          title: "商品数量不能少于1",
          icon: "none",
        });
        return;
      }
      this.cartList[index].count = newCount;
    },
    async deleteItem(item) {
      const res = await delShoppingCardList_API(cartId);

      uni.showModal({
        title: "提示",
        content: "确定要删除该商品吗？",
        success: (res) => {
          if (res.confirm) {
            this.cartList.splice(index, 1);
            uni.showToast({
              title: "删除成功",
              icon: "success",
            });
          }
        },
      });
    },
    clearCart() {
      uni.showModal({
        title: "提示",
        content: "确定要清空购物车吗？",
        success: (res) => {
          if (res.confirm) {
            this.cartList = [];
            uni.showToast({
              title: "购物车已清空",
              icon: "success",
            });
          }
        },
      });
    },
    checkout() {
      if (this.selectedCount === 0) {
        uni.showToast({
          title: "请选择要结算的商品",
          icon: "none",
        });
        return;
      }

      const selectedItems = this.cartList.filter((item) => item.selected);
      const total = this.totalPrice;

      uni.showModal({
        title: "确认订单",
        content: `共${this.selectedCount}件商品，总金额：¥${total}`,
        confirmText: "去支付",
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: "结算成功",
              icon: "success",
            });
            // 实际开发中可以跳转到支付页面
            // this.cartList = this.cartList.filter(item => !item.selected)
          }
        },
      });
    },
    goShopping() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    // 获取购物车列表
    async getShoppingCardList() {
      const res = getShoppingCardList_API();
    },
  },
  onLoad(options) {
    // 获取购物车列表
    this.getShoppingCardList();
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  padding-bottom: 100px;
}

.cart-page {
  .cart-list {
    padding: 15rpx;

    .cart-item {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      position: relative;

      .item-left {
        width: 80rpx;
        display: flex;
        justify-content: center;

        .item-select {
          .radio {
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
            border: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;

            &.checked {
              border-color: #ff5000;
              background-color: #ff5000;
              position: relative;

              &::after {
                content: "";
                display: block;
                width: 20rpx;
                height: 10rpx;
                border-left: 2px solid #fff;
                border-bottom: 2px solid #fff;
                transform: rotate(-45deg);
                position: absolute;
                top: 10rpx;
              }
            }
          }
        }
      }

      .item-content {
        flex: 1;
        display: flex;

        .item-image {
          width: 180rpx;
          height: 180rpx;
          margin-right: 20rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 8rpx;
          }
        }

        .item-info {
          flex: 1;

          .item-title {
            font-size: 28rpx;
            color: #333;
            line-height: 1.4;
            margin-bottom: 10rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .item-spec {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 20rpx;
          }

          .item-price {
            font-size: 32rpx;
            color: #e74c3c;
            font-weight: bold;
            margin-bottom: 20rpx;
          }

          .item-count {
            display: flex;
            align-items: center;

            .count-btn {
              width: 50rpx;
              height: 50rpx;
              line-height: 50rpx;
              text-align: center;
              border-radius: 8rpx;
              background-color: #f5f5f5;
              font-size: 32rpx;
              color: #666;
            }

            .count-num {
              width: 80rpx;
              text-align: center;
              font-size: 28rpx;
              color: #333;
            }
          }
        }
      }

      .item-right {
        width: 60rpx;
        display: flex;
        justify-content: center;

        .delete-btn {
          width: 40rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .delete-icon {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }

  .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 150rpx;

    .empty-image {
      width: 300rpx;
      height: 300rpx;
      margin-bottom: 40rpx;
    }

    .empty-text {
      font-size: 28rpx;
      color: #999;
      margin-bottom: 40rpx;
    }

    .empty-btn {
      width: 240rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: linear-gradient(to right, #ff9000, #ff5000);
      color: #fff;
      border-radius: 40rpx;
      font-size: 28rpx;
    }
  }

  .cart-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 10;

    .footer-left {
      display: flex;
      align-items: center;

      .select-all {
        display: flex;
        align-items: center;
        margin-right: 30rpx;

        .radio {
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
          border: 1px solid #ddd;
          margin-right: 10rpx;
          position: relative;

          &.checked {
            border-color: #ff5000;
            background-color: #ff5000;

            &::after {
              content: "";
              display: block;
              width: 16rpx;
              height: 8rpx;
              border-left: 2px solid #fff;
              border-bottom: 2px solid #fff;
              transform: rotate(-45deg);
              position: absolute;
              top: 8rpx;
              left: 6rpx;
            }
          }
        }

        text {
          font-size: 28rpx;
          color: #666;
        }
      }

      .clear-cart {
        font-size: 28rpx;
        color: #666;
      }
    }

    .footer-right {
      display: flex;
      align-items: center;

      .total-price {
        font-size: 28rpx;
        color: #666;
        margin-right: 20rpx;

        .price {
          color: #e74c3c;
          font-weight: bold;
          font-size: 32rpx;
        }
      }

      .checkout-btn {
        width: 200rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: linear-gradient(to right, #ff9000, #ff5000);
        color: #fff;
        border-radius: 40rpx;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }
}
</style>
